<template>
	<view>
		<view class="swiper">
			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange">
				<swiper-item>
					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
						@scrolltolower="swiperScrollLower">
						<view>
							<view class="newsItem" v-for="(item,index) in list" :key="index" v-if="list.length">
								<view class="addTime">{{item.AddTime}}</view>
								<view class="newsContain">
									<view class="system_News">
										<view class="system_img">
											<!-- <image src="../../static/images/new_icon1.png" mode="widthFix"></image> -->
											<text>系统消息</text>
										</view>
										<view class="isRead" @click="navGoToDetail(item)">
											<text :class="item.IsRead?'read':'notRead'" @click="handleReadMsgNews(item)">{{item.IsRead?'已读':'未读'}}</text>
											<!-- <view class="">查看详情>></view> -->
										</view>		
									</view>
									<text>{{item.Message}}</text>				
								</view>
							</view>
							<view class="noneImg" v-if="dataNull">
								<!-- <image src="../../static/static/null.png" mode="widthFix"></image> -->
								<br/>
								<text>暂无搜索结果</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="readAll" @click="readAllMsg" v-if="isAllRead">一键阅读</view>
		</view>
	</view>
</template>

<script>
	import
		TestApi
	from '@/api/newBase.js'
	import { getNews,readAllNews, readMsgNews } from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				swiperIndex: 0, //当前的swiperindex
				list: [],
				refreStatus: false,
				Index:1,
				dataNull:false,
				isAllRead:false
				//NotReadMessageCount: 0    wxUserMessages: []
			};
		},
		computed: {
		},
		mounted() {
		},
		onLoad() {
			this.getList(this.Index);
		},
		methods: {
			// 消息
			async getList(index){
				
					uni.showLoading({
						title:'加载中...'
					});
					var data = {
						Index:index,
						Size:10,
					}
					await TestApi.postNewDetail({data}).then(res=>{
					    console.log('ok',res)
						let total = res.Total
						res = res.Data
						if(res.NotReadMessageCount && res.NotReadMessageCount>0){
							this.isAllRead=true;
						}else{
							this.isAllRead=false;
						};
						// 后端分页没数据就返回第一页数据，真他么日狗，下面前面判断total/pageSize
						let pageSize = Math.ceil(total/data.Size)
						console.log("pageSize",pageSize)
						if(data.Index > pageSize&&index==1){
							this.dataNull=true;
						};
						if(data.Index > pageSize){
							uni.showToast({
								title:'没有更多了~',
								icon:'none'
							});
						}else{
							res.wxUserMessages.forEach((item)=>{
								item.AddTime=item.AddTime.replace('T',' ');
							})
							if(index==1){
								this.list=res.wxUserMessages;
							}else{
								this.list=[...this.list,...res.wxUserMessages]
							}	
						}
						uni.hideLoading();
					}).catch(error =>{
						console.log('1',error)
					})
					
					
					
				
			},
			//一键阅读
			async clickReadAll(){
				try{
					const { Data }= await readAllNews({});
				}catch(e){
					//TODO handle the exception
				}
			},
			// 跳转详情页
			navGoToDetail(e) {
				console.log('跳转详情页',e)
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				uni.showToast({
					icon: 'none',
					title: `加载中`
				});
				this.Index++;
				this.getList(this.Index);
			},
			// 下拉事件
			handleRefre() {
				this.refreStatus = true;
				setTimeout(() => {
					this.refreStatus = false;
				}, 1000);
				this.getList(1);
			},
			// 已读某一个
			async handleReadMsgNews(item){
				let isRead = item.IsRead;
				let id = item.Id;
				if(isRead)return;
				const { ErrorCode }= await readMsgNews({id});
				if(ErrorCode === "0"){
					this.getList(this.Index);
				}
			},
			readAllMsg(){
				console.log(12414);
				this.clickReadAll();
				setTimeout(()=>{
					uni.reLaunch({
						url:'/user_subpages/userCenter/myNews'
					})
				},300)
			}
		}
	};
</script>

<style lang="scss" scoped>
	page{
		background-color: #e8e8e8;
	}
	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}

	.nav {
		white-space: nowrap;
		position: relative;
		height: 80upx;
		padding: 20upx 0;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	.nav-item-act {
		color: pink;
		font-weight: bolder;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: pink;
		transition: left 0.3s ease;
	}

	swiper {
		height: calc(100vh - 0upx);
	}

	swiper-item {
		color: #000;
		position: relative;
	}

	.swiper-item {
		overflow-y: scroll;
	}

	.swiper-item-list {
		padding: 20rpx 40rpx 10rpx;
	}

	.swiper-scroll {
		height: 100%;
	}
	.newsItem{
		padding: 20rpx 20rpx 20rpx;
		.addTime{
			text-align: center;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #333;
		}
		.newsContain{
			background-color: #f9f9f9;
			border-radius: 10rpx;
			padding: 20rpx;
			color: #333;
			text{
				margin: 20rpx 0;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;  
				text-overflow: ellipsis;  
				display: -webkit-box;  
				-webkit-line-clamp: 4;    //文本一行显示
				-webkit-box-orient: vertical;  
			}
			.isRead{
				color: #666;
				font-size: 26rpx;
				text-align: right;
			}
			.notRead{
				color: #eb8a3e;
			}
		}
	}
	.noneImg{
		padding-top: 100rpx;
		text-align: center;
		image{
			width: 400rpx;
		}		
		text{
			font-size: 24rpx;
		}
	}
	.readAll{
		position: absolute;
		bottom: 60rpx;
		right: 20rpx;
		padding: 16rpx 30rpx;
		border-radius: 40rpx;
		background-color: rgba($color: #ff7f00, $alpha: .5);
		font-size: 26rpx;
		color: #fff;
	}
	.system_News{
		width: 100%;
		display: flex;
		justify-content: space-between;
		.system_img{
			display: flex;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>
